<template>
  <div class="page invite-index">
    <div class="invite-footer invite-page">
      <div class="invite-page-center">
        <el-row>
          <el-col :span="8" style="padding-left: 20px;">
            <div class="footer-text">
              <div class="footer-title">注册工程师人才</div>
              <div class="footer-phone">{{data.conactOur.phone}}</div>
              <div>工作时间：{{data.conactOur.workTime}}</div>
              <div>企业服务邮箱：{{data.conactOur.comEmail}}</div>
              <div>{{data.conactOur.comAddrees}}</div>
            </div>
          </el-col>
          <el-col :span="5" class="footer-text-center">
            <div class="footer-text">
              <div class="footer-title">关于我们</div>
              <div
                class="footer-text-button"
                v-for="(item,index) in data.AboutOurList"
                :key="index"
                @click="doNav(item.to)"
              >{{item.title}}</div>
            </div>
          </el-col>
          <el-col :span="5" class="footer-text-center">
            <div class="footer-text">
              <div class="footer-title">帮助中心</div>
              <div
                class="footer-text-button"
                v-for="(item,index) in data.HelpCenterList"
                :key="index"
                @click="doNav(item.to)"
              >{{item.title}}</div>
            </div>
          </el-col>
          <el-col :span="6" class="footer-img" style="padding-right:13px;">
            <div class="footer-img-list">
              <img :src="data.conactOur.codeImage1" alt>
              <div>{{data.conactOur.codeName1}}</div>
            </div>

            <div class="footer-img-list">
              <img :src="data.conactOur.codeImage2" alt>
              <div>{{data.conactOur.codeName2}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="footer-link">
          <span>友情链接：</span>
          <a v-for="item in data.links" :href="item.url" target="_Blank">{{item.name}}</a>
        </el-row>
      </div>
    </div>
    <el-row class="footer-versions">
      <div>&copy;2019 注册工程师人才网鄂ICP备12010182号-8</div>
      <a
        style="display:flex;align-items:center;margin-left:30px;text-decoration: none;color:#a9a9a9"
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42018502003914"
      >
        <img src="../assets/img/index/beian.png" alt>
        <span>鄂公网安备 42018502003914号</span>
      </a>
      <div style="display:flex;align-items:center;margin-left:30px;">
        <img src="../assets/img/index/jubao.png" alt>
        <span>违法和不良信息举报电话：027-65022400</span>
      </div>
      <div style="display:flex;align-items:center;margin-left:30px;">
        <span>邮箱：gcs360@zddhr.com</span>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        AboutOurList: [],
        HelpCenterList: [],
        links: [],
        conactOur: {}
      }
    }
  },
  methods: {
    doNav(to) {
      this.$router.push({ path: to })
    },
    initData() {
      let item = localStorage.getItem(localSaved.footerData);
      if(item != undefined){
        this.data = JSON.parse(item);
        this.$emit('input', this.data)
      }else{
        _g.apiPost('/talent/initPage.do', { state: '44,45,46,20' }).then(res => {
          let aboutOurList = res.data['45']
          aboutOurList.forEach(aboutOur => {
            this.data.AboutOurList.push(JSON.parse(aboutOur.content))
          })

          let helpCenterList = res.data['46']
          helpCenterList.forEach(helpCenter => {
            this.data.HelpCenterList.push(JSON.parse(helpCenter.content))
          })

          let links = res.data['44']
          links.forEach(link => {
            this.data.links.push(JSON.parse(link.content))
          })

          let conactOur = res.data['20']
          this.data.conactOur = JSON.parse(conactOur[0].content)
          localStorage.setItem(localSaved.footerData, JSON.stringify(this.data))
          this.$emit('input', this.data)
        })
      }
    }
  },
  mounted() {
    this.initData()
  },
  components: {}
}
</script>

<style lang="scss" scoped>
.invite-footer {
  width: 100%;
  height: auto;
  background: #fff;
  .el-row {
    margin: 40px 0 0 0;
  }
  .footer-text {
    color: #666;
    font-size: 16px;
    line-height: 30px;
    display: inline-block;
    .footer-text-button {
      cursor: pointer;
      &:hover {
        color: #f09338;
      }
    }
    .footer-phone {
      font-size: 20px;
      font-weight: bold;
      color: #f09338;
    }
    .footer-title {
      font-size: 20px;
      color: #333;
      font-weight: bold;
    }
  }
  .footer-text-center {
    display: flex;
    justify-content: center;
  }
  .footer-img {
    display: flex;
    justify-content: flex-end;
    .footer-img-list {
      margin-left: 20px;
      div {
        text-align: center;
      }
      img {
        width: 100px;
        height: 100px;
      }
    }
  }
  .footer-link {
    padding: 0 0 10px 21px;
    color: #666;
    font-size: 16px;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    a {
      margin: 0 0 0 15px;
      color: #666;
      text-decoration: none;
      &:hover {
        color: #f09338;
      }
    }
  }
}
.footer-versions {
  // padding-left: 8px;
  height: 50px;
  padding-left: calc((100% - 1160px) / 2);
  background: #eee;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #a9a9a9;
  font-size: 14px;
  img {
    margin: 0 10px 0 0;
    height: 20px;
  }
}
</style>
